<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小说平台 - 用户中心</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Microsoft YaHei', sans-serif;
    }

    body {
      background-color: #f5f7fa;
      color: #333;
      line-height: 1.6;
    }

    .container {
      width: 90%;
      max-width: 1200px;
      margin: 0 auto;
      background: white;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      min-height: 100vh;
    }

    header {
      background: linear-gradient(to right, #1e3c72, #2a5298);
      color: white;
      padding: 20px 0;
      text-align: center;
      position: relative;
    }

    .logo {
      font-size: 2rem;
      font-weight: bold;
      margin-bottom: 5px;
    }

    .user-section {
      position: absolute;
      top: 20px;
      right: 20px;
      display: flex;
      align-items: center;
    }

    .user-info {
      margin-right: 15px;
    }

    .username {
      font-weight: 500;
    }

    .btn {
      padding: 8px 15px;
      border: none;
      border-radius: 20px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 0.9rem;
    }

    .btn-logout {
      background: #f44336;
      color: white;
    }

    nav {
      background: linear-gradient(to right, #303f9f, #3f51b5);
      padding: 10px 0;
    }

    .nav-links {
      display: flex;
      justify-content: center;
      list-style: none;
      flex-wrap: wrap;
    }

    .nav-links li {
      margin: 5px 10px;
    }

    .nav-links a {
      color: white;
      text-decoration: none;
      font-size: 1rem;
      font-weight: 500;
      padding: 8px 20px;
      border-radius: 20px;
      transition: all 0.3s ease;
    }

    .nav-links a:hover,
    .nav-links a.active {
      background: rgba(255, 255, 255, 0.2);
    }

    .section {
      display: none;
      padding: 30px;
    }

    .section.active {
      display: block;
    }

    /* 小说章节查询样式 */
    .search-container {
      width: 80%;
      max-width: 600px;
      margin: 0 auto;
      padding: 20px 0;
    }

    h2 {
      color: #1e3c72;
      text-align: center;
      margin-bottom: 20px;
      font-size: 1.8rem;
    }

    .form-group {
      margin-bottom: 15px;
    }

    input {
      width: 100%;
      padding: 12px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 1rem;
    }

    .btn-submit {
      background: linear-gradient(to right, #2196F3, #21CBF3);
      color: white;
      font-size: 1rem;
      padding: 12px;
      margin-top: 10px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      width: 100%;
      transition: all 0.3s ease;
    }

    .btn-submit:hover {
      opacity: 0.9;
      transform: translateY(-2px);
    }

    /* 书籍网格 */
    .books-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 20px;
      margin-top: 30px;
    }

    .book-card {
      background: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }

    .book-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    }

    .book-image {
      height: 180px;
      background: linear-gradient(45deg, #303f9f, #7986CB);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 3.5rem;
    }

    .book-info {
      padding: 15px;
    }

    .book-title {
      font-size: 1.1rem;
      margin-bottom: 5px;
      font-weight: bold;
    }

    .book-author {
      color: #666;
      font-size: 0.9rem;
      margin-bottom: 5px;
    }

    .book-chapters {
      color: #555;
      font-size: 0.85rem;
    }

    /* 小说状态管理 */
    .status-form-container {
      width: 80%;
      max-width: 500px;
      margin: 0 auto;
      background: white;
      padding: 25px;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }

    select, textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 1rem;
      margin-bottom: 15px;
    }

    /* 读者留言 */
    .comments-section {
      margin-top: 30px;
      max-width: 800px;
      margin: 30px auto 0;
    }

    .comment-card {
      background: #f9f9f9;
      border-radius: 8px;
      padding: 15px;
      margin: 15px 0;
      border-left: 4px solid #1e3c72;
    }

    .comment-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
      color: #666;
      font-size: 0.9rem;
    }

    .comment-novel {
      font-weight: 500;
    }

    .comment-content {
      font-size: 1rem;
      line-height: 1.5;
    }

    .message {
      padding: 12px;
      border-radius: 6px;
      margin: 15px 0;
      text-align: center;
      font-weight: bold;
      display: none;
    }

    .success {
      background: #e8f5e9;
      color: #2e7d32;
    }

    .error {
      background: #ffebee;
      color: #c62828;
    }

    @media (max-width: 768px) {
      .nav-links {
        justify-content: flex-start;
      }
      
      .nav-links li {
        margin: 5px;
      }
      
      .status-form-container, 
      .search-container {
        width: 95%;
        padding: 15px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <div class="logo">小说阅读平台</div>
      <p>用户中心</p>
      <div class="user-section">
        <div class="user-info">
          <span class="username" id="username">reader@example.com</span>
        </div>
        <button id="logoutBtn" class="btn btn-logout">退出登录</button>
      </div>
    </header>

    <nav>
      <ul class="nav-links">
        <li><a href="#" class="nav-link active" data-target="search">小说章节查询</a></li>
        <li><a href="#" class="nav-link" data-target="status">小说状态管理</a></li>
        <li><a href="#" class="nav-link" data-target="comment">读者留言</a></li>
      </ul>
    </nav>

    <!-- 小说章节查询部分 -->
    <section id="search" class="section active">
      <div class="search-container">
        <h2>小说章节查询</h2>
        <div class="form-group">
          <input type="text" id="searchInput" placeholder="输入小说名称或作者">
        </div>
        <button class="btn-submit" id="searchBtn">搜索</button>
      </div>

      <div style="margin: 30px auto; max-width: 1000px;">
        <h2 style="text-align: center;">搜索结果</h2>
        <div class="books-grid" id="searchResults">
          <!-- 默认展示一些小说 -->
          <div class="book-card">
            <div class="book-image">📖</div>
            <div class="book-info">
              <div class="book-title">星辰变</div>
              <div class="book-author">作者：我吃西红柿</div>
              <div class="book-chapters">最新章节：第1520章 大结局</div>
            </div>
          </div>
          <div class="book-card">
            <div class="book-image">📚</div>
            <div class="book-info">
              <div class="book-title">斗破苍穹</div>
              <div class="book-author">作者：天蚕土豆</div>
              <div class="book-chapters">最新章节：第1652章 结束，也是开始</div>
            </div>
          </div>
          <div class="book-card">
            <div class="book-image">🖋️</div>
            <div class="book-info">
              <div class="book-title">凡人修仙传</div>
              <div class="book-author">作者：忘语</div>
              <div class="book-chapters">最新章节：第2459章 飞升仙界</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 小说状态管理部分 -->
    <section id="status" class="section">
      <div class="status-form-container">
        <h2>小说状态管理</h2>
        <div id="statusMessage" class="message"></div>
        <div class="form-group">
          <label for="novelSelect">选择小说</label>
          <select id="novelSelect">
            <option value="">--请选择小说--</option>
            <option value="星辰变">星辰变</option>
            <option value="斗破苍穹">斗破苍穹</option>
            <option value="凡人修仙传">凡人修仙传</option>
            <option value="雪中悍刀行">雪中悍刀行</option>
            <option value="诡秘之主">诡秘之主</option>
          </select>
        </div>
        <div class="form-group">
          <label for="statusValue">阅读状态</label>
          <select id="statusValue">
            <option value="reading">阅读中</option>
            <option value="completed">已读完</option>
            <option value="paused">暂停阅读</option>
            <option value="plan-to-read">计划阅读</option>
          </select>
        </div>
        <div class="form-group">
          <label for="progress">阅读进度（0-100%）</label>
          <input type="number" id="progress" min="0" max="100" placeholder="输入阅读进度">
        </div>
        <button class="btn-submit" id="updateStatusBtn">更新状态</button>
      </div>
    </section>

    <!-- 读者留言部分 -->
    <section id="comment" class="section">
      <div class="status-form-container">
        <h2>读者留言</h2>
        <div id="commentMessage" class="message"></div>
        <div class="form-group">
          <label for="novelComment">选择小说</label>
          <select id="novelComment">
            <option value="">--请选择小说--</option>
            <option value="星辰变">星辰变</option>
            <option value="斗破苍穹">斗破苍穹</option>
            <option value="凡人修仙传">凡人修仙传</option>
            <option value="雪中悍刀行">雪中悍刀行</option>
            <option value="诡秘之主">诡秘之主</option>
          </select>
        </div>
        <div class="form-group">
          <label for="commentContent">留言内容</label>
          <textarea id="commentContent" rows="5" placeholder="请输入您的留言内容..."></textarea>
        </div>
        <button class="btn-submit" id="submitCommentBtn">提交留言</button>
      </div>

      <div class="comments-section">
        <h2 style="text-align: center;">最新读者留言</h2>
        <div id="commentsList">
          <!-- 默认展示一些留言 -->
          <div class="comment-card">
            <div class="comment-header">
              <div class="comment-novel">[星辰变]</div>
              <div>2023-11-20 14:30</div>
            </div>
            <div class="comment-content">
              这部小说太精彩了！主角秦羽的成长历程非常引人入胜，尤其是从凡人修炼成神的过程。
            </div>
          </div>
          <div class="comment-card">
            <div class="comment-header">
              <div class="comment-novel">[斗破苍穹]</div>
              <div>2023-11-19 21:15</div>
            </div>
            <div class="comment-content">
              萧炎这个角色塑造得非常成功，从天才变废柴再重新崛起的故事情节非常励志。
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

  <script>
    // 导航切换功能
    document.querySelectorAll('.nav-link').forEach(link => {
      link.addEventListener('click', function (e) {
        e.preventDefault();

        // 移除所有活动状态
        document.querySelectorAll('.nav-link').forEach(link => {
          link.classList.remove('active');
        });
        document.querySelectorAll('.section').forEach(section => {
          section.classList.remove('active');
        });

        // 添加当前活动状态
        this.classList.add('active');
        const target = this.getAttribute('data-target');
        document.getElementById(target).classList.add('active');
      });
    });

    // 退出登录功能
    document.getElementById('logoutBtn').addEventListener('click', function() {
      if(confirm('确定要退出登录吗？')) {
        // 清除用户信息（模拟）
        localStorage.removeItem('userToken');
        window.location.href = 'index.html';
      }
    });

    // 搜索功能
    document.getElementById('searchBtn').addEventListener('click', function() {
      const query = document.getElementById('searchInput').value;
      
      if(!query) {
        alert('请输入搜索内容');
        return;
      }
      
      // 显示加载状态
      const searchBtn = this;
      const originalText = searchBtn.textContent;
      searchBtn.textContent = '搜索中...';
      searchBtn.disabled = true;
      
      // 模拟搜索过程
      setTimeout(() => {
        searchBtn.textContent = originalText;
        searchBtn.disabled = false;
        
        // 更新搜索结果（这里用静态数据代替后端返回结果）
        const resultsContainer = document.getElementById('searchResults');
        resultsContainer.innerHTML = `
          <div class="book-card">
            <div class="book-image">🔍</div>
            <div class="book-info">
              <div class="book-title">${query}的搜索结果</div>
              <div class="book-author">共找到3部相关小说</div>
              <div class="book-chapters">点击查看详情</div>
            </div>
          </div>
          <div class="book-card">
            <div class="book-image">📚</div>
            <div class="book-info">
              <div class="book-title">${query}传奇</div>
              <div class="book-author">作者：${query}</div>
              <div class="book-chapters">最新章节：第25章 新的开始</div>
            </div>
          </div>
          <div class="book-card">
            <div class="book-image">📖</div>
            <div class="book-info">
              <div class="book-title">${query}的世界</div>
              <div class="book-author">作者：探索者</div>
              <div class="book-chapters">最新章节：第12章 最终章</div>
            </div>
          </div>
        `;
      }, 800);
    });

    // 更新阅读状态
    document.getElementById('updateStatusBtn').addEventListener('click', function() {
      const novel = document.getElementById('novelSelect').value;
      const status = document.getElementById('statusValue').value;
      const progress = document.getElementById('progress').value;
      const message = document.getElementById('statusMessage');
      
      if(!novel) {
        message.textContent = '请选择小说';
        message.className = 'message error';
        message.style.display = 'block';
        return;
      }
      
      // 状态文本映射
      const statusMap = {
        'reading': '阅读中',
        'completed': '已读完',
        'paused': '暂停阅读',
        'plan-to-read': '计划阅读'
      };
      
      const statusText = statusMap[status] || status;
      let messageText = `《${novel}》状态更新为：${statusText}`;
      
      if(progress && progress > 0) {
        messageText += `，阅读进度: ${progress}%`;
      }
      
      message.textContent = messageText;
      message.className = 'message success';
      message.style.display = 'block';
      
      // 3秒后自动隐藏消息
      setTimeout(() => {
        message.style.display = 'none';
      }, 3000);
    });

    // 提交评论功能
    document.getElementById('submitCommentBtn').addEventListener('click', function() {
      const novel = document.getElementById('novelComment').value;
      const content = document.getElementById('commentContent').value;
      const message = document.getElementById('commentMessage');
      
      if(!novel || !content) {
        message.textContent = '请选择小说并填写留言内容';
        message.className = 'message error';
        message.style.display = 'block';
        return;
      }
      
      if(content.length < 10) {
        message.textContent = '留言内容请至少10个字符';
        message.className = 'message error';
        message.style.display = 'block';
        return;
      }
      
      // 显示加载状态
      const submitBtn = this;
      const originalText = submitBtn.textContent;
      submitBtn.textContent = '提交中...';
      submitBtn.disabled = true;
      
      // 模拟提交过程
      setTimeout(() => {
        submitBtn.textContent = originalText;
        submitBtn.disabled = false;
        
        // 显示成功消息
        message.textContent = '留言提交成功！';
        message.className = 'message success';
        message.style.display = 'block';
        
        // 清空表单
        document.getElementById('commentContent').value = '';
        
        // 添加新留言到列表顶部
        const newComment = document.createElement('div');
        newComment.className = 'comment-card';
        newComment.innerHTML = `
          <div class="comment-header">
            <div class="comment-novel">[${novel}]</div>
            <div>${new Date().toLocaleDateString()}</div>
          </div>
          <div class="comment-content">
            ${content}
          </div>
        `;
        
        const commentsList = document.getElementById('commentsList');
        commentsList.insertBefore(newComment, commentsList.firstChild);
        
        // 3秒后隐藏消息
        setTimeout(() => {
          message.style.display = 'none';
        }, 3000);
      }, 800);
    });
  </script>
</body>
</html>